/* eslint-disable array-callback-return */
import React, { Component } from 'react';
import { Flex } from 'antd-mobile';
import './HCcollect.css'
import headPortrait from '../../img/title.png'
import * as api from '../../uitls/api'


class HCcollect extends Component {
    constructor() {
        super()
        this.state = {
            collectShop: [],
            // 店铺头像地址
            shop_photo_url: '',
            // 店铺名
            shop_name: '',
            // 店铺评价
            account_score: '',
            // 起送价格
            shop_start_price: '',
            // 配送费
            shop_delivery_money: '',


        }
    }
    fanhui = () => {
        this.props.history.push('/Home/MyInfo')
    }
    xiangqing = (num) => {
        console.log(num);
        this.props.history.push({ pathname: '/Home/ShopDetails/' + num })
    }
    componentDidMount() {
        this.axios({
            url: api.GET_QueryListShopCollect,
            method: 'get',
            params: {
                user_id: 1
            }
        }).then(data => {
            console.log(data.data.data);
            if (data.data.code === 200) {
                this.setState({
                    collectShop: data.data.data
                })
            }
        })
    }
    initdom = () => {
        console.log(this.state.collectShop);
        return this.state.collectShop.map((item, i) => {
            console.log(i);
            return <div key={i}>
                <Flex style={{ marginTop: '10px' }} onClick={() => this.xiangqing(item.shop_id)}>
                    <div>
                        <div className='HCcollect_img'>
                            <img src={headPortrait} alt="" />
                        </div>
                    </div>
                    <div className="HCcollect_content">
                        <div>{item.shop_name}</div>
                        <div>
                            店铺评分:{item.account_score}
                        </div>
                        <div>
                            起送<span>{item.shop_start_price}</span>配送<span>{item.shop_delivery_money}</span>美团专送
                        </div>
                    </div>
                </Flex>
            </div>
        })
    }

    render() {
        return (
            <div className='HCcollect_box'>
                <Flex style={{ backgroundColor: '#FFD656' }}>
                    <Flex.Item>
                        <div className='HCcollect_title_icon'>
                            <i className="iconfont icon-jiantouarrowhead7 " onClick={this.fanhui}></i>
                        </div>
                    </Flex.Item>
                    <Flex.Item>
                        <div className="HCcollect_sub-title">我的收藏</div>
                    </Flex.Item>
                    <Flex.Item></Flex.Item>
                </Flex>
                {this.initdom()}
            </div>
        );
    }
}

export default HCcollect;